.maputnik-filter-editor-wrapper {
  padding: $margin-3;
  overflow: hidden;

  .maputnik-input-block {
    margin: 0;
  }
}

.maputnik-filter-editor {
  @extend .clearfix;
  color: $color-lowgray;
}

.maputnik-filter-editor-property {
  display: inline-block;
  width: 25%;
}

.maputnik-filter-editor-operator {
  margin-left: 2%;
  display: inline-block;
  width: 17%;

  .maputnik-select {
    width: 100%;
  }
}

.maputnik-filter-editor-args {
  display: inline-block;
  width: 54%;
  margin-left: 2%;

  .maputnik-string,
  .maputnik-number {
    width: 100%;
  }
}

.maputnik-filter-editor-compound-select {
  margin-bottom: $margin-2;

  .maputnik-doc-wrapper {
    width: 50%;
  }

  .maputnik-select {
    display: inline-block;
    width: 50%;
  }
}

.maputnik-filter-editor-unsupported {
  color: $color-midgray;
}

.maputnik-add-filter {
  display: inline-block;
  float: right;
  margin-top: $margin-3;
}

.maputnik-delete-filter {
  @extend .maputnik-icon-button;
}

.maputnik-filter-editor-block-action {
  margin-top: $margin-2;
  margin-bottom: $margin-2;
  display: inline-block;
  width: 6%;
  margin-right: 1.5%;
}

.maputnik-filter-editor-block-content {
  display: inline-block;
  width: 92.5%;
}

.maputnik-radio-as-button {
  @extend .maputnik-button;

  border: solid 1px transparent;

  &:focus-within {
    border: solid 1px $color-white;
  }

  input {
    width: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
  }
}
